<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      label-position="right"
      label-width="auto"
    >
      <h4 class="title_2">客户查询</h4>
      <el-row>
        <el-col :span="8">
          <el-form-item label="客户名称" prop="custName">
            <el-input
              v-model="queryParams.custName"
              placeholder="请输入"
              clearable
              style="width: 300px"
            />
          </el-form-item>
        </el-col>
				<el-col :span="8">
					<el-form-item label="证件号码类型" prop="certType">
						<el-select
							v-model="queryParams.certType"
							placeholder="请选择"
							clearable
							style="width: 300px"
						>
							<el-option
								v-for="dict in certTypeOptions"
								:key="dict.value"
								:label="dict.label"
								:value="dict.value"
							/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="证件号码" prop="certNo">
						<el-input
							v-model="queryParams.certNo"
							placeholder="请输入"
							clearable
							style="width: 300px"
						/>
					</el-form-item>
				</el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="组织机构代码" prop="orgType">
            <el-select
              v-model="queryParams.orgType"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in orgTypeOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="经营状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in statusOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="center">
		<el-button icon="Refresh" @click="resetQuery(queryRef)">重置</el-button>
		<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
      </el-row>
    </el-form>

		<div>
      <h4 class="title_2">客户列表</h4>
		</div>

    <el-row v-if="custList.length" v-loading="loading">
			<el-col :span="24">
				<el-collapse v-model="activeNames">
					<el-collapse-item v-for="item in custList" :key="item.id" :name="item.id">
						<template #title>
							<el-space>
								<span class="collapse_title">{{ item.custName }}</span>
							</el-space>
							<el-space>
								<span class="collapse_title">{{ item.certNo }}</span>
							</el-space>
							<el-space v-if="showTag(item,1)">
								<el-tag>团车</el-tag>
							</el-space>
							<el-space v-if="showTag(item,2)">
								<el-tag type="success">重客</el-tag>
							</el-space>
							<el-space v-if="showTag(item,3)">
								<el-tag type="danger">企客</el-tag>
							</el-space>
							<el-space>
								<el-button size="small" icon="View" type="primary" @click.stop="check(item)">查看</el-button>
							</el-space>
						</template>
						<div>
							<el-descriptions
								title=""
								:column="2"
								label-align="right"
								:border="true"
							>
								<el-descriptions-item label="组织机构代码" label-align="right">
									<span>{{item.orgNo}}</span>
								</el-descriptions-item>
								<el-descriptions-item label="企业类型" label-align="right">
									<span>{{item.type}}</span>
								</el-descriptions-item>
								<el-descriptions-item label="注册地址" label-align="right">
									<span>{{item.address}}</span>
								</el-descriptions-item>
								<el-descriptions-item label="法人代表" label-align="right">
									<span>{{item.legalRepresentative}}</span>
								</el-descriptions-item>
								<el-descriptions-item label="所属一级行业" label-align="right">
									<span>{{item.industryOne}}</span>
								</el-descriptions-item>
								<el-descriptions-item label="所属二级行业" label-align="right">
									<span>{{item.industryTwo}}</span>
								</el-descriptions-item>
								<el-descriptions-item label="VIP编码" label-align="right">
									<span>{{item.vipCode}}</span>
								</el-descriptions-item>
								<el-descriptions-item label="存潜标识" label-align="right">
									<span>{{item.label}}</span>
								</el-descriptions-item>
								<el-descriptions-item label="客户级别" label-align="right">
									<span>{{item.custLevel}}</span>
								</el-descriptions-item>
								<el-descriptions-item label="总部管理处室" label-align="right">
									<span>{{item.section}}</span>
								</el-descriptions-item>
								<el-descriptions-item label="操作" label-align="right">
									<el-button size="small" plain @click.stop="check(item)">工商信息</el-button>
									<el-button size="small" plain @click.stop="check(item)">客户视图</el-button>
								</el-descriptions-item>
							</el-descriptions>
						</div>
					</el-collapse-item>
				</el-collapse>
			</el-col>
		</el-row>
		<div v-else>
			<el-empty description="无数据" />
		</div>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
  </div>
</template>

<script setup name="myTask">
import { ElMessageBox } from "element-plus";
const router = useRouter()

const custList = ref([]);
const loading = ref(true);
const total = ref(0);
const queryRef = ref(null);
const activeNames = ref(['1','2'])
const certTypeOptions = ref([
	{ label: '统一社会信用代码', value: 1 },
	{ label: '组织机构代码', value: 2 },
])
const orgTypeOptions = ref([
  { label: "全部", value: "" },
]);
const statusOptions = ref([
{ label: "全部", value: "" },
{ label: "有效", value: "1" },
{ label: "无效", value: "0" },
]);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
		custName: '',
		certType: '',
		certNo: '',
		orgType: '',
		status: '',
  },
});

const { queryParams } = toRefs(data);

const handleClick = (tab, event) => {
  console.log(tab, event);
  handleQuery();
};
const getList = () => {
  loading.value = true;
  setTimeout(() => {
    custList.value = [
      {
				id: '1',
				flag: [1,2],
        custName: "中国联调集团河北省通信有限责任公司",
				certNo: '911300006010425130',
				orgNo: '7789901290',
				type: '有限责任公司',
				address: '河北省石家庄市长安区',
				legalRepresentative: '张XX',
				industryOne: '信息传输、软件和信息技术服务业',
				industryTwo: '电信、广播电视和卫星',
				vipCode: 'VIP0000000000001390',
				label: '存量客户',
				custLevel: '重客二级',
				section: '大型商业客户一处',
      },
			{
				id: '2',
				flag: [1,3],
        custName: "中国联调集团河北省通信有限责任公司",
				certNo: '911300006010425130',
				orgNo: '7789901290',
				type: '有限责任公司',
				address: '河北省石家庄市长安区',
				legalRepresentative: '张XX',
				industryOne: '信息传输、软件和信息技术服务业',
				industryTwo: '电信、广播电视和卫星',
				vipCode: 'VIP0000000000001390',
				label: '存量客户',
				custLevel: '重客二级',
				section: '大型商业客户一处',
      },
			{
				id: '3',
				flag: [3,4],
        custName: "中国联调集团河北省通信有限责任公司",
				certNo: '911300006010425130',
				orgNo: '7789901290',
				type: '有限责任公司',
				address: '河北省石家庄市长安区',
				legalRepresentative: '张XX',
				industryOne: '信息传输、软件和信息技术服务业',
				industryTwo: '电信、广播电视和卫星',
				vipCode: 'VIP0000000000001390',
				label: '存量客户',
				custLevel: '重客二级',
				section: '大型商业客户一处',
      },
			{
				id: '4',
				flag: [1,4],
        custName: "中国联调集团河北省通信有限责任公司",
				certNo: '911300006010425130',
				orgNo: '7789901290',
				type: '有限责任公司',
				address: '河北省石家庄市长安区',
				legalRepresentative: '张XX',
				industryOne: '信息传输、软件和信息技术服务业',
				industryTwo: '电信、广播电视和卫星',
				vipCode: 'VIP0000000000001390',
				label: '存量客户',
				custLevel: '重客二级',
				section: '大型商业客户一处',
      },
			{
				id: '5',
				flag: [1],
        custName: "中国联调集团河北省通信有限责任公司",
				certNo: '911300006010425130',
				orgNo: '7789901290',
				type: '有限责任公司',
				address: '河北省石家庄市长安区',
				legalRepresentative: '张XX',
				industryOne: '信息传输、软件和信息技术服务业',
				industryTwo: '电信、广播电视和卫星',
				vipCode: 'VIP0000000000001390',
				label: '存量客户',
				custLevel: '重客二级',
				section: '大型商业客户一处',
      },
			{
				id: '6',
				flag: [2,3],
        custName: "中国联调集团河北省通信有限责任公司",
				certNo: '911300006010425130',
				orgNo: '7789901290',
				type: '有限责任公司',
				address: '河北省石家庄市长安区',
				legalRepresentative: '张XX',
				industryOne: '信息传输、软件和信息技术服务业',
				industryTwo: '电信、广播电视和卫星',
				vipCode: 'VIP0000000000001390',
				label: '存量客户',
				custLevel: '重客二级',
				section: '大型商业客户一处',
      },
    ];
    total.value = Number(custList.value.length);
    loading.value = false;
  }, 300);
};
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  console.log("==", queryParams);
  getList();
};
const resetQuery = (formEl) => {
  formEl.resetFields();
  handleQuery();
};
const showTag = (item, val) => {
	return item.flag.includes(val)
}
const check = (item) => {
	router.push({ path: '/customerView/corporateClient', query: { id: item.id } })
};
getList();
</script>
<style lang="scss" scoped>
	.collapse_title {
		font-size: 14px;
	}
</style>
